<script>
import Form from "@cci/cp-form"
const components = {
  SelectMultiple: () => import("@/components/Select/SelectMultiple"),
  SelectWeek: () => import("@/components/Select/SelectWeek"),
  SelectTime: () => import("@/components/Select/SelectTime"),
  SelectTimeRange: () => import("@/components/Select/SelectTimeRange"),
  SelectCode: () => import("@/components/Select/SelectCode"),
  SelectSysCode: () => import("@/components/Select/SelectSysCode"),
  SelectConfig: () => import("@/components/Select/SelectConfig"),
  SelectTree: () => import("@/components/Select/SelectTree"),
  SelectColorPicker: () => import("@/components/Select/SelectColorPicker")
}
const componentList = Object.keys(components)

export default {
  mixins: [Form],
  components,
  methods: {
    handleChange(item, e) {
      // 屏蔽表情
      const regStr = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g
      if (regStr.test(e)) {
        e = e.replace(regStr, "")
      }
      // element 表单验证空格输入也会通过，因此针对输入字符串去除首尾空格
      e = typeof e === "string" ? e.trim() : e
      this.model[item.prop] = e
      this.emitRelated(e, item.relatedFields, item.ref || item.prop)
    }
  },
  beforeCreate() {
    this.R = this.R || {}
    componentList.forEach(name => {
      this.R[`${name}Render`] = function(h, item, opts) {
        if (!item.anchor) {
          item.anchor = {
            span: 8,
            lg: 12,
            sm: 12
          }
        }
        opts.on["change"] = this.mixinEvent(
          opts.on["change"],
          this.handleChange.bind(this, item)
        )
        return [h(name, opts)]
      }
    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.wrap-form {
  .el-row > .el-form-item:last-child {
    margin-bottom: 0;
  }
}
</style>
